<template>
  <div id="enroll_manage" class="container">
    <div class="content">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="title" :to="{ path: '/processing_center/comprehensive' }">办理中心首页</el-breadcrumb-item>
        <el-breadcrumb-item class="title">报名</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-select
              style="width:2.03rem;float: left;margin-left:.1rem;"
              clearable
              v-model="tabledisplayObj.courseId"
              placeholder="请选择学年"
            >
              <el-option
                v-for="item in selectCourseList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              style="width:2.03rem;float: left;margin-left:.1rem;"
              clearable
              v-model="tabledisplayObj.courseId"
              placeholder="请选择年级"
            >
              <el-option
                v-for="item in selectCourseList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              style="width:2.03rem;float: left;margin-left:.1rem;"
              clearable
              filterable
              v-model="tabledisplayObj.courseId"
              placeholder="请选择班级"
            >
              <el-option
                v-for="item in selectCourseList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-input
              style="width: 2.03rem;margin-left:.1rem;"
              placeholder="搜索 学员姓名"
              v-model="tabledisplayObj.studentName"
              class="input_search"
              clearable
            ></el-input>
            <div
              @click="searchCoupon()"
              class="search_btn"
              style="margin-left:0.1rem;"
            >搜索</div>
            <div class="right_btn"  @click="enroll_add">报 名</div>
          </div>
        </div>
        <div>
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 1rem;">序号</td>
                <td style="width: 3rem;">学员姓名</td>
                <td style="width: 3rem;">班级</td>
                <td style="width: 3rem;">入院时间</td>
                <td style="width: 3rem;">账单计费开始时间</td>
                <td style="width: 3rem;">账单计费结束时间</td>
                <td style="width: 5rem;">缴费方案</td>
                <td style="width: 3rem;">缴费</td>
                <td style="width: 3rem;">状态</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="item,index in enrollDataList">
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tabledisplayObj.currPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
        <el-dialog
          class="commonDialog"
          :modal="false"
           :close-on-click-modal="commonDialog.clickmodal"
          :title="commonDialog.title"
          :visible.sync="commonDialog.visible"
          v-loading.fullscreen.lock="commonDialog.loading"
          element-loading-background="rgba(0, 0, 0, 0.1)"
         >
          <div class="enroll">
            <div class="txt">选择报名学员</div>
            <div class="rowbox">
              <el-input
                class="inputtxt"
                style="font-size:0.16rem;"
                placeholder="请输入关键字"
                v-model="commonDialog.searchText"
                clearable
                ref="searchText"
              ></el-input>
              <el-button class="resetElement" type="primary" @click="searchData">查询</el-button>
              <el-button class="resetElement" type="primary" @click="addStudent">新增学员</el-button>
            </div>
            <template>
              <el-table
                :data="commonDialog.tableData"
                border
                max-height="240"
                style="width: 100%;font-size:0.16rem;"
                class="table"
                highlight-current-row
                @current-change="currentChange"
              >
                <el-table-column prop="student" label="学员"></el-table-column>
                <el-table-column prop="age" label="年龄"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
              </el-table>
            </template>
            <div class="rowbox bottom">
              <el-button class="resetElement" type="primary" @click="closeCommonDialog">取消</el-button>
              <el-button
                 class="resetElement" type="primary"
                @click="enrollBtnClick"
              >报名</el-button>
            </div>
          </div>
          
        </el-dialog>
        <enrollAdd ref="enrollAdd" @callback="closeAdd"></enrollAdd>
      </div>
    </div>
  </div>
</template>

<script>
import enrollAdd from "./common/enroll_add";
let vm;
let user;
export default {
  data() {
    return {
      tabledisplayObj: {
        currPage: 1,
        pageSize: 10,
        total: 0,
        studentName:"",
        courseId:""
      },
      commonDialog:{
        title:"报名",
         clickmodal:false,
        loading: false,
        visible: false,
        searchText:"",
        tableData:[]
      },
      selectCourseList:[],
      enrollDataList:[]//报名学员列表
    };
  },
  components: {enrollAdd},
  methods: {
    /**取消报名 */
    closeCommonDialog(){
      vm.commonDialog = {
         title:"报名",
         clickmodal:false,
        loading: false,
        visible: false,
        searchText:"",
        tableData:[]
      }
    },
    /**点击报名 */
    enrollBtnClick(){
      vm.commonDialog.visible = false;
       vm.$refs.enrollAdd.init({});
    },
    /**新增学员 */
    addStudent(){

    },
    /**筛选学员 */
    searchData(){

    },
    /**选中学员回调 */
    currentChange(){

    },
    /**新增报名回调 */
    closeAdd(){

    },
    /**新增报名 */
    enroll_add(){
      vm.commonDialog.visible = true;
     
    },
    /**
     * 初始化数据
     */
    initData() {
      this.getData(vm.tabledisplayObj);
    },
    /**
     * 抽取出来获取列表
     */
    getData(paras) {
    },
    pageSizeChange: function(val) {
      //页条数发生改变
      vm.tabledisplayObj.pageSize = val;
      vm.initData();
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      vm.tabledisplayObj.currPage = val;
      vm.initData();
    },
    /**
     * 搜索
     */
    searchCoupon() {
      vm.tabledisplayObj.currPage = 1;
      vm.initData();
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    //获取数据字典
    let dicdata = tool.getItem(lsKey.dict, true);
    this.initData();
  }
};
</script>

<style lang="scss">
#enroll_manage {
  .commonDialog {
      z-index: 30 !important;
      top: 0.81rem !important;
      left: 2.1rem !important;
      background-color: rgba(0, 0, 0, 0.5) !important;

      .el-dialog {
        width: 8.55rem !important;

        .el-dialog__title {
          font-size: .22rem !important;
          color: #333333 !important;
        }
      }

      .enroll {
        padding: 0 0.2rem 0 0.2rem;
      }

      .enroll {
        .el-table {
          max-height: 2.4rem !important;

          .el-table__body-wrapper {
            max-height: 1.92rem !important;
          }
        }
      }

      .enroll {
        .el-table__body tr.current-row>td {
          background-color: #5eabf9;
        }

        .el-button {
          margin: 0.1rem;
          // width: 1rem;
        }

        .txt {
          font-size: 0.16rem;
        }

        .rowbox.bottom {
          display: flex;
          justify-content: center;

          .btn {
            margin: 0.1rem 0.5rem;
          }
        }

        .inputtxt {
          width: 2.5rem;
          margin: 0.1rem;
          margin-left: 0;

        }
      }
    }
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .el-breadcrumb__separator {
    color: #999999;
  }
  .el-breadcrumb__inner.is-link {
    font-weight: 400;
    color: #141414;
  }
  .el-breadcrumb__inner.is-link:hover {
    color: #3885f8;
  }
  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: #999999;
  }
  .right_btn {
    background-image: url(~@/assets/img/clue_manage/add_white.png);
    width: 1.54rem;
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>